<template>
  <view class="my-orders">
    <!-- 顶部导航栏-->
    <HeaderNav title="我的订单"></HeaderNav>
    <!-- 背景 -->
    <view class="bg"> </view>
    <!-- 卡片-->
    <view class="card">
      <!-- 选项卡-->
      <view class="tab">
        <view class="tab_item " :class="active===0?'active':''" @click="activeHandler(0)">
          全部
        </view>
        <view class="tab_item" :class="active===1?'active':''" @click="activeHandler(1)">
          进行中
        </view>
        <view class="tab_item" :class="active===2?'active':''" @click="activeHandler(2)">
          已完成
        </view>
      </view>

      <template v-if="orders.length">


        <!-- 全部 -->
        <view class="all_orders" v-show="active===0">
          <!-- 已完成的订单 -->
          <view class="complete" v-for="e in orders " :key="e['oid']">
            <!-- 头-->
            <view class="header">
              <view class="order_no">
                {{e['oid']}}
              </view>
              <view class="opera">
                <template v-if="e['status']===2">
                  <view class="complete_title">
                    已完成
                  </view>
                  <uni-icons type="trash" size="20" @click="removeOrderHandler(e['oid'])"></uni-icons>
                </template>
                <view class="complete_title" @click="receiveComfirmHandler(e['oid'])" v-else>
                  确认收货
                </view>
              </view>
            </view>

            <!-- 商品详细 -->
            <view class="goods-info" v-for="good in e['goods']" :key="good['pid']">
              <view class="goods-cover">
                <image :src="good['smallImg']" mode="widthFix">
                </image>
              </view>

              <view class="c2">
                <!-- 第一行-->
                <view class="r1">
                  <view class="name">
                    {{good['name']}}
                  </view>
                  <view class="rule">
                    {{good['rule']}}
                  </view>
                </view>
                <!-- 第二行英文名-->
                <view class="r2-enname">
                  {{good['enname']}}
                </view>

                <!-- 第三行 -->
                <view class="r3">
                  <view class="price">
                    ￥{{good['price']}}
                  </view>

                  <!-- 数量选择-->
                  <view class="operation">
                    x{{good['count']}}
                  </view>
                </view>

              </view>

            </view>


            <!-- 订单详细-->
            <view class="order-info">
              <view class="r1">
                <view class="date">
                  {{e['ctime']|fmtDate}}
                </view>

              </view>
              <view class="r2">
                <view class="total">
                  共计{{e['count']}}件
                </view>
                <view class="price">
                  合计 ￥{{e['total']}}
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 进行中-->
        <view class="all_orders" v-show="active===1">
          <!-- 待收货的订单-->
          <view class="complete" v-for="e in orders " :key="e['oid']">
            <!-- 头-->
            <view class="header">
              <view class="order_no">
                {{e['oid']}}
              </view>
              <view class="opera" @click="receiveComfirmHandler(e['oid'])">
                <view class="complete_title">
                  确认收货
                </view>
              </view>
            </view>

            <!-- 商品详细 -->
            <view class="goods-info" v-for="good in e['goods'] " :key="good['pid']">
              <view class="goods-cover">
                <image :src="good['smallImg']" mode="widthFix">
                </image>
              </view>

              <view class="c2">
                <!-- 第一行-->
                <view class="r1">
                  <view class="name">
                    {{good['name']}}
                  </view>
                  <view class="rule">
                    {{good['rule']}}
                  </view>
                </view>
                <!-- 第二行英文名-->
                <view class="r2-enname">
                  {{good['enname']}}
                </view>

                <!-- 第三行 -->
                <view class="r3">
                  <view class="price">
                    ￥{{good['price']}}
                  </view>

                  <!-- 数量选择-->
                  <view class="operation">
                    x{{good['count']}}
                  </view>
                </view>

              </view>

            </view>

            <!-- 订单详细-->
            <view class="order-info">
              <view class="r1">
                <view class="date">
                  {{e['ctime']|fmtDate}}
                </view>

              </view>
              <view class="r2">
                <view class="total">
                  共计{{e['count']}}件
                </view>
                <view class="price">
                  合计 ￥{{e['total']}}
                </view>
              </view>
            </view>

          </view>


        </view>


        <!-- 已完成-->
        <view class="all_orders" v-show="active===2">
          <!-- 已完成的订单 -->
          <view class="complete" v-for="e in orders " :key="e['oid']">
            <!-- 头-->
            <view class="header">
              <view class="order_no">
                {{e['oid']}}
              </view>
              <view class="opera">
                <template v-if="e['status']===2">
                  <view class="complete_title">
                    已完成
                  </view>
                  <uni-icons type="trash" size="20" @click="removeOrderHandler(e['oid'])"></uni-icons>
                </template>
                <view class="complete_title" v-else>
                  确认收货
                </view>
              </view>
            </view>


            <!-- 商品详细 -->
            <view class="goods-info" v-for="good in e['goods']" :key="good['pid']">
              <view class="goods-cover">
                <image :src="good['smallImg']" mode="widthFix">
                </image>
              </view>

              <view class="c2">
                <!-- 第一行-->
                <view class="r1">
                  <view class="name">
                    {{good['name']}}
                  </view>
                  <view class="rule">
                    {{good['rule']}}
                  </view>
                </view>
                <!-- 第二行英文名-->
                <view class="r2-enname">
                  {{good['enname']}}
                </view>

                <!-- 第三行 -->
                <view class="r3">
                  <view class="price">
                    ￥{{good['price']}}
                  </view>

                  <!-- 数量选择-->
                  <view class="operation">
                    x{{good['count']}}
                  </view>
                </view>

              </view>

            </view>
            <!-- 订单详细-->

            <view class="order-info">
              <view class="r1">
                <view class="date">
                  {{e['ctime']|fmtDate}}
                </view>

              </view>
              <view class="r2">
                <view class="total">
                  共计{{e['count']}}件
                </view>
                <view class="price">
                  合计 ￥{{e['total']}}
                </view>
              </view>
            </view>
          </view>


        </view>

      </template>
      <MyEmpty v-else title="暂无订单"></MyEmpty>

    </view>


  </view>

  </view>
</template>

<script>
  import HeaderNav from '../../../../components/HeaderNav/HeaderNav.vue'
  import MyEmpty from '../../../../components/MyEmpty/MyEmpty.vue'
  import {
    req
  } from '../../../utils/request/request';
  import {
    uniToast
  } from '../../../utils/uni/uni';
  export default {
    components: {
      HeaderNav,
      MyEmpty
    },
    data() {
      return {
        active: 0,
        orders: [1]
      };
    },
    onLoad() {
      this.active = 0
      this.getMyOrders(0)
    },
    filters: {
      fmtDate(val) {
        const date = new Date(val)
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        let minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        let second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`
      }
    },
    methods: {
      /* 确认收货 */
      receiveComfirmHandler(oid) {
        req('receive', {
          reqData: {
            oid
          },
          method: 'POST',
          isToken: true
        }).then(({
          data: res
        }) => {
          if (res['code'] === 80000) {
            this.getMyOrders(this.active)
          }
          uniToast(res['msg'])
        }, err => {
          console.log(err);
        })
      },

      /* 删除订单*/
      removeOrderHandler(oid) {
        req('removeOrder', {
          reqData: {
            oid
          },
          isToken: true,
          method: 'POST'
        }).then(({
          data: res
        }) => {
          if (res['code'] === 90000) {
            this.getMyOrders(this.active)
          }
          uniToast(res['msg'])
        }, err => {
          console.log(err);
        })
      },




      /* 获取订单*/
      getMyOrders(status) {
        req('findOrder', {
          reqData: {
            status
          },
          isToken: true,
        }).then(({
          data: res
        }) => {
          this.collateData(res['result'])
        }, err => {
          console.log(err);
        })
      },
      /* 整理数据*/
      collateData(data) {
        const oidArr = []
        data.forEach(e => {
          if (oidArr.indexOf(e['oid']) !== -1) {} else {
            oidArr.push(e['oid'])
          }
        })
        let resArr = []
        oidArr.forEach(oid => {
          let obj = {}
          obj['oid'] = oid
          obj['goods'] = []
          obj['count'] = 0
          obj['total'] = 0
          data.forEach(o => {
            if (o['oid'] === obj['oid']) {
              obj['goods'].push(o)
              obj['ctime'] = o['createdAt']
              obj['count'] += o['count']
              obj['total'] += o['count'] * o['price']
              obj['status'] = o['status']
            }
          })
          resArr.push(obj)
        })
        console.log(resArr);
        this.orders = resArr
      },
      /* 变换索引*/
      activeHandler(idx) {
        this.active = idx
        this.getMyOrders(idx)
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f4f4f4;
  }

  .my-orders {
    background-color: #f4f4f4;

    .bg {
      background-color: #0c34ba;
      height: 200rpx;
    }

    .card {
      border-top-right-radius: 15rpx;
      border-top-left-radius: 15rpx;
      background-color: #f4f4f4;
      transform: translateY(-50rpx);
      margin: 0 30rpx;
      overflow: hidden;


      .tab {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #fff;
        font-size: 28rpx;
        color: #646566;

        .tab_item {
          padding: 25rpx 0;
          transition: all .3s;

          &.active {
            border-bottom: #0c34ba solid 4rpx;
            color: #0c34ba;
          }
        }

      }

      .complete {
        margin-top: 20rpx;
        padding: 20rpx;
        background-color: #fff;
        border-top-right-radius: 15rpx;
        border-top-left-radius: 15rpx;

        .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #646566;
          font-size: 26rpx;

          .opera {
            display: flex;
            align-items: center;
          }

          .complete_title {
            margin-right: 10rpx;
          }
        }

        .goods-info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20rpx;
          margin-top: 20rpx;

          .goods-cover {
            display: flex;
            align-items: center;
            width: 160rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .c2 {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-right: 50rpx;

            .r1 {
              display: flex;
              font-size: 26rpx;
              align-items: center;

              .name {
                margin-right: 25rpx;
                font-size: 30rpx;
                color: #333;
              }

              .rule {
                color: #bbb;
              }
            }

            .r2-enname {
              font-size: 26rpx;
              color: #ccc
            }

            .r3 {
              display: flex;
              justify-content: space-between;
              margin: 10rpx 0;
              align-items: center;

              .price {
                color: #0c34ba;
                font-size: 26rpx;
                font-weight: bold;
              }

              .operation {
                color: #bbb;
                font-size: 20rpx;
              }
            }
          }

          .goods-cover {
            image {
              width: 140rpx;
            }
          }
        }

        .order-info {
          display: flex;
          flex-direction: column;
          font-size: 24rpx;
          position: relative;
          border-top: #ddd 2rpx dashed;
          padding: 20rpx 0;

          &::before,
          &::after {
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fbf6f2;
            position: absolute;
            z-index: 1;
            top: 0;
          }

          &::before {
            left: 0;
            transform: translate(-100%, -20rpx);
          }

          &::after {
            transform: translate(100%, -20rpx);
            right: 0;
          }

          .r2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20rpx;

            .price {
              color: #0c34ba;
              font-size: 30rpx;
              font-weight: bold;
            }
          }
        }



      }

    }
  }
</style>
